<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">\
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/art-template/lib/template-web.js"></script>
    <!-- <script src="/node_modules/axios/lib/axios.js"></script> -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>英雄联盟</title>
</head>
<style>
    body {
        background: url('/assets/images/timg3.jpg');
        color: #fff;
        background-size: cover;
    }
</style>
<body>
    <div class="container">
        <h1 class="text-center">英雄联盟<small>添加英雄</small></h1>
        <!-- 表格部分 -->
        <a href="index.html" class="btn btn-info btn-sm">返回首页</a>
        <hr>
        <form>
            <label for="">姓名：</label>
            <input type="text" class="form-control" name="name">
            性别
            <label>
                <input type="radio" name="gender" value="男" checked> 男
            </label>
            <label>
                <input type="radio" name="gender" value="女"> 女
            </label>
            <div>
                <input type="submit" value="提交" class="  btn btn-success">
            </div>

        </form>
    </div>
    <!-- 模板操作的数据 -->
    <script id="tmp" type="text/html">

    </script>
    <script>
        $(function () {
            $('form').on('submit', (function (e) {
                // console.log($(':input[type=radio]:checked').val())
                e.preventDefault()
                // console.log($(this).serialize())
                // 发送ajax 请求 
                if($(':input[type=text]').val().trim().length ===0)  return alert('请输入英雄名字')
                axios.post('http://127.0.0.1:5000/api/addhero', $(this).serialize())
                    .then(function (res) {
                        // console.log(res)
                        if (res.status === 200 && res.data.err_code === 0) {
                            location.href = "index.html"
                        }
                    })
                    .catch(function (err) {
                        alert('服务器错误')
                    })
            }))
        })
    </script>
</body>

</html>